import React from 'react';
export const HeroSection = () => {
  return <section className="w-full bg-cream relative overflow-hidden">
      <div className="container mx-auto px-4 md:px-6 py-12 md:py-24">
        <div className="max-w-3xl mx-auto text-center mb-12 md:mb-16">
          <h1 className="font-nunito font-bold text-3xl md:text-5xl mb-6 text-dark leading-tight">
            Curated Love for Your Little Cub
          </h1>
          <p className="font-inter text-lg md:text-xl text-gray-700 mb-8">
            Stress-free, expert-backed guides to the best baby gear
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a href="#" className="px-6 py-3 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium text-base">
              Explore Guides
            </a>
            <a href="#" className="px-6 py-3 bg-transparent border border-terracotta text-terracotta rounded-md hover:bg-terracotta/10 transition-colors font-medium text-base">
              Join Cub Club
            </a>
          </div>
        </div>
      </div>
      <div className="w-full h-64 md:h-96 relative">
        <img src="https://images.unsplash.com/photo-1555252333-9f8e92e65df9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Parent holding baby's feet" className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-b from-cream via-transparent to-transparent opacity-60"></div>
      </div>
    </section>;
};